<template>
  <div class="container MaterialMange" style="width:99%;margin-top:-25px;">
    <div class="query-box query-boxstudent">
        <el-form :model="queryBox" status-icon ref="queryBox">
          <el-row>
            <el-col :span="8">
              <el-form-item label prop="mediaName">
                <el-input v-model="queryBox.mediaName" placeholder="文件名称">
                  <template slot="prepend">文件名称</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          type="primary"
          perms="true"
          @click="search"
        />
      </div>
    </div>
    <!-- 批量删除按钮 -->
    <div class="add-btns fl">
      <kt-button
        :label="$t('批量删除')"
        perms="true"
        :disabled="this.selections.length===0" 
        type="primary"
        @click="deleteAll"
      />
    </div>
    <!--表格内容栏-->
    <div class="btn">
      <Crm-table
        class="table-width"
        MaterialFileList
        width="400"
        permsDelete="true"
        :data="pageResult"
        :columns="columns"
        :loading='loading'
        :showOverflowTooltip='false'
        @selectionChange="selectionChange"
        @findPage="findPage"
        @handleDeleteDic='handleDelete'
      ></Crm-table>
    </div>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { regionDataPlus } from "element-china-area-data";
import { CodeToText } from "element-china-area-data";
import WebUpload from "@/components/common/upload/WebUpload";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie"
export default {
  name: "MaterialMange",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size:'small',
      // 查询条件
      isopen: [
        {
          value: "启用",
          key: "1"
        },
        {
          value: "停用",
          key: "2"
        }
      ],
      useDateTime:[],
      upDateTime:[],
      queryBox: {
        name:'',
      },
      dataFormAdd:{
        useDate:'',
        materielType:'',
        platformType:'',
        code:'',
        useDate:'',

      },
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "name", label: "物料名称", minWidth: 200 },
        { prop: "style", label: "格式", minWidth: 100 },
        { prop: "mediaSizeStr", label: "大小", minWidth: 150 },
        { prop: "mediaMd5", label: "mediaMd5", minWidth: 250 },
        { prop: "mediaUrl", label: "mediaUrl", minWidth: 400 },
        { prop: "createDate", label: "创建时间", minWidth: 150 },
        { prop: "id", label: "id", minWidth: 150 },     
      ],
      buryingConfigRule: {
        materielType: [
          { required: true, message: '请填写物料类别', trigger: 'blur' }
        ],
        platformType: [
          { required: true, message: '请填写分类', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请填写物料名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请填写物料编码', trigger: 'blur' }
        ],
        useDate :[
          { required: true, message: '请选择使用期限', trigger: 'change' }
        ],
      },
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {
        content: []
      },
      useDate:[],
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      materiel_type_option:[],
      bc_material_platform_type_options:[],
      bc_materiel_use_state_options:[],
      loading: false, // 加载标识
      editLoading:false,
      userList:[],
      selections: [], //选中列表集合
    };
  },
  methods: {
    get_downList(){
      // 物料类别
      this.materiel_type_option = JSON.parse(
        localStorage.getItem("materielTypeOption")
      );
      // 分类
      this.bc_material_platform_type_options = JSON.parse(
        localStorage.getItem("bcMaterialPlatformType")
      );
      // 状态
      this.bc_materiel_use_state_options = JSON.parse(
        localStorage.getItem("bcMaterielUseStateOptions")
      );
      this.$api.person.findPage({userType:3}).then(res=>{
        if(res.result==1){
          this.userList=res.userInfoList
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    handleChange(value) {
    },
    // 搜索
    search() {
      this.loading = true;

      this.pageRequest.pageNum = 1;

      this.findPage(null);
    },
    // 获取分页数据
    findPage: function(data) {
      this.loading=true
      if (data !== null) {
        this.loading=true
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.agent.mediaInfoFileList(this.queryBox).then(res=>{
        if(res.result==1){
          this.loading=false
          let content = { content: res.data, totalSize: res.total };
          this.pageResult = content;
          this.pageResult.content.forEach(item=>{
            this.materiel_type_option.forEach(mtItem=>{
              if(mtItem.key==item.materielType){
                item.materielTypeStr=mtItem.value
              }
            })
            item.useStartTimeStr=/\d{4}-\d{1,2}-\d{1,2}/g.exec(item.useStartTime)
            item.useEndTimeStr=/\d{4}-\d{1,2}-\d{1,2}/g.exec(item.useEndTime)
            item.useTimeStr=item.useStartTimeStr+'--'+item.useEndTimeStr
            this.bc_material_platform_type_options.forEach(pItem=>{
              if(pItem.key==item.platformType){
                item.platformTypeStr=pItem.value
              }
            })
            this.bc_materiel_use_state_options.forEach(bcusItem=>{
              if(bcusItem.key==item.useState){
                item.useStateStr=bcusItem.value
              }
            })
            item.mediaSizeStr=this.formatFileSize(item.mediaSize)
          })
        }
      })
    },
    handleDelete(params){
      this.$confirm('确定删除此项？','提示',{
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=>{
        this.$api.agent.mediaInfoFileDelete({ids:params.row.id}).then(res=>{
          if(res.result==1){
            this.$message.success(res.msg)
            this.findPage(null)
          }else{
            this.$message.error(res.msg)
          }
        })
      })
      
    },
    // 批量删除
    deleteAll(){
      let ids = this.selections.map(item => item.id);
      let ids2=ids.join(',')
      this.$confirm('确定删除此项？','提示',{
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=>{
        this.$api.agent.mediaInfoFileDelete({ids:ids2}).then(res=>{
          if(res.result==1){
            this.$message.success(res.msg)
            this.findPage(null)
          }else{
            this.$message.error(res.msg)
          }
        })
      })
    },
    formatFileSize(size) {
      var fileSize = 0;
      if (size / 1024 > 1024) {
        var len = size / 1024 / 1024;
        fileSize = len.toFixed(2) + "MB";
      } else if (size / 1024 / 1024 > 1024) {
        var len = size / 1024 / 1024;
        fileSize = len.toFixed(2) + "GB";
      } else {
        var len = size / 1024;
        fileSize = len.toFixed(2) + "KB";
      }
      return fileSize;
    },
     // 获取选中的表格数据
    selectionChange: function(selections) {
      this.selections = selections.selections;
    },
    reset(queryBox) {
      this.queryBox.mediaName=''
      this.findPage(null);
    }
  },
  mounted() {
    this.get_downList()
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style lang='scss' scoped>
.MaterialMange{
  .depart-box{
    .el-form-item{
      width: 100%;
    }
    
  }
}
.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit{
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.demo-form-inline{
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input{
    width: 93% !important;
  }
  .el-select{
    width: 100% !important;
  }
  .tit{
    display: inline-block;
    margin-top: 10%;
  }
}
.el-row .el-col{
  margin-left: 0;
}
.query-box .el-row .el-col{
  margin-left: 2%;
}
.el-dialog__wrapper .el-form-item__content{
  margin-left: 0;
}
</style>
<style lang='scss'>
.batchdistribution-pop .el-dialog__header{
  padding: 0 0 0 0 !important;
}
.add-MaterialMangePop{
  .el-range-editor.el-input__inner{
    width: 100%;
  }
}
.MaterialMange{
  .btn{
    .el-button+.el-button{
      width: 20px 
    }
  }
}
</style>



